<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <div id="app">
    <h2>当前计数:{{conuter}}</h2>
    <!--view依然是我们的dom-->
    <!-- <button v-on:click="conuter++">+</button>
    <button v-on:click="conuter--">-</button> -->
    <button v-on:click="add">+</button>
    <!--新的指令@click,该指令用于监听某个元素的点击事件,并且需要指定当发生点击时，
      执行的方法(方法通常是methods中定义的方法)-->
    <button v-on:click="sub">-</button>
  </div>
  <script src="../js/vue.js"></script>
  <script>
    //语法糖:简写
    const app = new Vue({//Model就是我们抽离出来的obj
      //viewModel就是我们创建的Vue对象实例
      el: '#app',// 挂载 el作用：决定之后vue实列会管理哪个dom
      data: {//类型：Object|Function(组件当中data必须是一个函数) 作用：vue实例对应的数据对象
        conuter: 0
      },
      methods: {//属性methods，该属性用于在vue对象中定义方法  methods：方法，函数： function  作用:定义属于Vue的一些方法,可以在其他地方调用,也可以在指令中使用

        add: function () {
          console.log('add被执行');
          this.conuter++
        },
        sub: function () {
          console.log('sub被执行');
          this.conuter--
        }
      }
    })
    //js以前
    //1.拿button元素
    //2.添加监听事件
  </script>
</body>

</html>